<template>
  <div class="home">
    <Top></Top>
    <!-- <HelloWorld msg="Welcome to Your Vue.js App" /> -->
    <div class="banner" v-for="item in baimg" :key="item.baimg">
      <img :src="item.img" alt />
    </div>

    <div class="fuwu">
      <p class="h">优质的服务</p>
      <p>提供全方位的互联网+产品及服务,与客户共同成长</p>
      <p class="line">
        <img src="../assets/xian.jpg" />
      </p>
    </div>
    <div class="fours" v-for="ban in bimgs" :key="ban.bimgs">
      <img :src="ban.img" alt height="100%" width="100%" />
      <!-- <div id="imgboxs">
        <div id="topimg" style class="animate__animated animate__bounceInDown">
          <img src="../assets/topimg.png" />
        </div>
        <div id="leftimg" class="animate__animated animate__bounceInLeft">
          <img src="../assets/leftimg.png" />
        </div>
        <div id="righttimg" class="animate__animated animate__bounceInRight">
          <img src="../assets/rightimg.png" />
        </div>
        <div id="buttomimg" class="animate__animated animate__bounceInUp">
          <img src="../assets/bottomimg.png" />
        </div>
      </div>-->
    </div>
    <div class="wenti1">
      <p class="itp">行业解决问题</p>
      <p>您的心愿就是我的心愿，为您服务就是我的职责</p>
      <p class="line">
        <img src="../assets/xian.jpg" />
      </p>
      <div class="wenti">
        <div class="sdl" v-for="wenti in dlimg" :key="wenti.id">
          <dl>
            <dt>
              <img :src="wenti.img" alt />
            </dt>
            <dd class="tet">{{wenti.texta1}}</dd>
            <dd>{{wenti.texta2}}</dd>
          </dl>
        </div>
        <div class="sdl" v-for="wenti in dlimg2" :key="wenti.id">
          <dl>
            <dt>
              <img :src="wenti.img" alt />
            </dt>
            <dd class="tet">{{wenti.texta1}}</dd>
            <dd>{{wenti.texta2}}</dd>
          </dl>
        </div>
        <div class="sdl" v-for="wenti in dlimg3" :key="wenti.id">
          <dl>
            <dt>
              <img :src="wenti.img" alt />
            </dt>
            <dd class="tet">{{wenti.texta1}}</dd>
            <dd>{{wenti.texta2}}</dd>
          </dl>
        </div>
      </div>
    </div>
    <div class="jd" v-for="jal in tet" :key="jal.id">
      <p class="h">{{jal.h}}</p>
      <p>
        {{jal.h2}}
        <span>{{jal.sp}}</span>
      </p>
      <p>
        <img src="../assets/xian.jpg" />
      </p>
      <div class="swp">
        <div v-for="item in swimg" :key="item.id">
          <img :src="item.img" alt />
        </div>
      </div>
    </div>
    <!-- 看这看这！！！！！！！！！！这🐉 -->
    <div class="Process">
      <p class="lc">软件开发流程</p>
      <ul class="uld">
        <li v-for="dnm in tdd" :key="dnm.id" @mousemove="mose(dnm.id)">
          <div class="img2s" :class="id==dnm.id?'ba':'bb'">
            <img :src="dnm.imgs" v-show="id==dnm.id" />
            <img :src="dnm.img" v-show="id!==dnm.id" />
            <p>{{dnm.name}}</p>
          </div>
          <span :class="id==dnm.id?'oa':'ob'"></span>
        </li>
      </ul>
      <div class="btmbox" v-for="timg in imgar" :key="timg.id"  v-show="id==timg.id">
        <div>
          <div class="btm">
            <div class="text">
              <p class="hed">{{timg.tet}}</p>
              <p>{{timg.tetx}}</p>
            </div>
            <div class="imgt">
              <img :src="timg.img" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="hztext" v-for="texx in hezuo" :key="texx.id">
      <p class="h">{{texx.h}}</p>
      <p>{{texx.h2}}</p>
      <p>
        <img :src="texx.img" />
      </p>
    </div>
    <div class="hezuo">
      <div class="hzimg" v-for="imgt in shuzu" :key="imgt.id">
        <div>
          <img :src="imgt.img" />
        </div>
      </div>
    </div>
    <Bott></Bott>
  </div>
</template>
<script>
// @ is an alias to /src
// import HelloWorld from "@/components/HelloWorld.vue";
import Footer from "@/components/bott.vue";
import Top from "../components/top.vue";
import Bott from "../components/bott.vue";

export default {
  name: "HomeView",
  components: {
    // HelloWorld,
    Footer,
    Top,
    Bott
  },
  data() {
    return {
      id:1,
      ids:2,
      // colors: true,
      bimgs: [
        {
          img: require("../assets/tu.png")
        }
      ],
      dlimg: [
        {
          img: require("../assets/app.png"),
          texta1: "APP/小程序应用解决方案",
          texta2:
            "APP/微信公众平台/小程序定制开发，可提供微商城、活动，红包、投票、签到、业务流、订购、积分、抽奖等功能定制，根据您的需求为您贴身打造。"
        }
      ],
      dlimg2: [
        {
          img: require("../assets/dngzhiwangzhan.png"),
          texta1: "网站定制",
          texta2:
            "网站定制：追求网络科技，共享网络生活，为企业商家打造符合业务发展需要的整体解决方案服务，为客户创造最大价值"
        }
      ],
      dlimg3: [
        {
          img: require("../assets/xitong.png"),
          texta1: "系统开发",
          texta2:
            "系统开发：制定开发计划，根据用户对系统功能的要求和业务管理的需要，系统调研与需求分析、功能设计、系统设计、系统编码与实现组合到一起成为一个完整的可运行的系统。"
        } //行业解决问题的文字和图片三个
      ],
      baimg: [
        {
          img: require("../assets/ban.png") //头部轮播banned图
        }
      ],
      tet: [
        {
          h: "经典案列",
          h2: "我们的热情，不仅对顾客；我们的规范，不仅于制度",
          img: "",
          sp: "查看更多"
        }
      ],

      tdd: [
        {
          colors: true,
          id: 1,
          img: require("../assets/L1.png"),
          imgs: require("../assets/L2.png"),
          name: "需求分析"
        },
        {
          colors: true,
          id: 2,
          img: require("../assets/L1.png"),
          imgs: require("../assets/L2.png"),
          name: "签订合同"
        },
        {
          colors: true,
          id: 3,
          img: require("../assets/L1.png"),
          imgs: require("../assets/L2.png"),
          name: "签订合同"
        },
        {
          colors: true,
          id: 4,
          img: require("../assets/L1.png"),
          imgs: require("../assets/L2.png"),
          name: "签订合同"
        },
        {
          colors: true,
          id: 5,
          img: require("../assets/L1.png"),
          imgs: require("../assets/L2.png"),
          name: "签订合同"
        },
        {
          colors: true,
          id: 6,
          img: require("../assets/L1.png"),
          imgs: require("../assets/L2.png"),
          name: "签订合同"
        },
        {
          colors: true,
          id: 7,
          img: require("../assets/L1.png"),
          imgs: require("../assets/L2.png"),
          name: "签订合同"
        }
      ],
      imgar: [
        {
          id: 1,
          tet: "需求分析1",
          tetx: "根据需求双方沟通细节，评估周期与报价，确保按需定制开发",
          img: require("../assets/dimg.png")
        },
        {
          id: 2,
          tet: "需求分析2",
          tetx: "根据需求双方沟通细节，评估周期与报价，确保按需定制开发",
          img: require("../assets/hh2.png")
        },
        {
          id: 3,
          tet: "需求分析3",
          tetx: "根据需求双方沟通细节，评估周期与报价，确保按需定制开发",
          img: require("../assets/hhh3.png")
        },

        {
          id: 4,
          tet: "需求分析4",
          tetx: "根据需求双方沟通细节，评估周期与报价，确保按需定制开发",
          img: require("../assets/hh2.png")
        },
        {
          id: 5,
          tet: "需求分析5",
          tetx: "根据需求双方沟通细节，评估周期与报价，确保按需定制开发",
          img: require("../assets/dimg.png")
        },
        {
          id: 6,
          tet: "需求分析6",
          tetx: "根据需求双方沟通细节，评估周期与报价，确保按需定制开发",
          img: require("../assets/hhj4.png")
        },
        {
          id: 7,
          tet: "需求分析7",
          tetx: "根据需求双方沟通细节，评估周期与报价，确保按需定制开发",
          img: require("../assets/dimg.png")
        }
        // 需求分析
      ],
      // imgsarr: [
      //   {
      //     img: require("../assets/L1.png"),
      //     dian: "",
      //     text: "需求分析"
      //   },
      //   {
      //     img: require("../assets/L1.png"),
      //     dian: "",
      //     text: "需求分析"
      //   },
      //   {
      //     img: require("../assets/L1.png"),
      //     dian: "",
      //     text: "需求分析"
      //   },
      //   {
      //     img: require("../assets/L1.png"),
      //     dian: "",
      //     text: "需求分析"
      //   },
      //   {
      //     img: require("../assets/L1.png"),
      //     dian: "",
      //     text: "需求分析"
      //   },
      //   {
      //     img: require("../assets/L1.png"),
      //     dian: "",
      //     text: "需求分析"
      //   },
      //   {
      //     img: require("../assets/L1.png"),
      //     dian: "",
      //     text: "需求分析"
      //   } //软件开发流程
      // ],
      hezuo: [
        {
          h: "合作共赢",
          h2: "和谐创新、开拓市场、团结拼搏、共创未来",
          img: require("../assets/xian.jpg")
        }
      ],
      shuzu: [
        {
          img: require("../assets/baidu.png")
        },
        {
          img: require("../assets/youku.png")
        },
        {
          img: require("../assets/ttsbr.png")
        },
        {
          img: require("../assets/xiecheng.png")
        },
        {
          img: require("../assets/jingd.png")
        },
        {
          img: require("../assets/tmall.png")
        },
        {
          img: require("../assets/gaode.png")
        },
        {
          img: require("../assets/ks.png")
        },
        {
          img: require("../assets/pufa.png")
        },
        {
          img: require("../assets/jianshe.png")
        }
      ], //十个合作伙伴
      swimg: [
        {
          img: require("../assets/bban.png")
        },
        {
          img: require("../assets/ban.png")
        },
        {
          img: require("../assets/bban.png")
        },
        {
          img: require("../assets/ban.png")
        },
        {
          img: require("../assets/APPkaifa.png")
        }
      ],
      dizhi: [
        {
          gongsi: "山东柏瑞设计有限公司",
          dianhua: "联系电话：18317093686",
          dizhi:
            "地址：济南创新谷2号楼孵化器五楼（长清区海棠路与芙蓉路交叉路口东南）"
        }
      ],
      wxs: [
        {
          img: require("../assets/erweima.png"),
          wx: "微信公众号"
        }
      ],
      ftp: [
        {
          hhh:
            "Shandong Bairui Design Co., Ltd 山东柏瑞设计有限公司版权所有 鲁ICP备2021028094号-1"
        }
      ],
      lcimg: [
        {
          xianshi: true,
          id: "1",
          h: "需求分析1",
          texts: "根据需求双方沟通细节，评估周期与报价，确保按需定制开发",
          img: require("../assets/dimg.png")
        },
        {
          xianshi: true,
          id: "2",
          h: "需求分析2",
          texts: "根据需求双方沟通细节，评估周期与报价，确保按需定制开发",
          img: require("../assets/dimg.png")
        },
        {
          xianshi: true,
          id: "3",
          h: "需求分析3",
          texts: "根据需求双方沟通细节，评估周期与报价，确保按需定制开发",
          img: require("../assets/dimg.png")
        },
        {
          xianshi: true,
          id: "4",
          h: "需求分析4",
          texts: "根据需求双方沟通细节，评估周期与报价，确保按需定制开发",
          img: require("../assets/dimg.png")
        },
        {
          xianshi: true,
          id: "5",
          h: "需求分析5",
          texts: "根据需求双方沟通细节，评估周期与报价，确保按需定制开发",
          img: require("../assets/dimg.png")
        },
        {
          xianshi: true,
          id: "6",
          h: "需求分析6",
          texts: "根据需求双方沟通细节，评估周期与报价，确保按需定制开发",
          img: require("../assets/dimg.png")
        },
        {
          xianshi: true,
          id: "7",
          h: "需求分析7",
          texts: "根据需求双方沟通细节，评估周期与报价，确保按需定制开发",
          img: require("../assets/dimg.png")
        }
      ]
    };
  },
  methods: {
    mose(id) {
      this.id = id;
      // console.log(dnm.id)
    }
  }
};
</script>
